import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import './search.scss';
import Mock from 'mockjs';
import axios from 'axios';
Mock.mock(/getsearchdata/, {
    "data|6": [{
        "msg|1": ['木门', '推拉门', '衣帽间', '卧室背景墙', '餐边桌']
    }],
})  

class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        this.getsearchdata();
    }

    getsearchdata() {
        axios.get('/getsearchdata/').then(res => {
            this.setState({
                data: res.data.data
            })
        })
    }

    render() {
        return (
            <div className="Search">
                <div className="search_title pr">
                    <i className="iconfont pa">&#xe65c;</i>
                    <input type="text" placeholder="木 门" />
                    <span className="pa">搜索</span>
                </div>
                <div className="search_content">
                    <h3><i className="iconfont">&#xe7de;</i>热门搜索</h3>
                    <ul>
                        {this.state.data && this.state.data.map((item, key) => 
                            <li key={key}>
                                <Link to="/stores">{item.msg}</Link>
                            </li>
                        )}
                    </ul>
                </div>
            </div>
        )
    }
}

export default connect()(Search);